<script setup lang="ts">

import {TeamType} from "../models/team";
import {teamStatusEnum} from "../constants/teamConstant.ts";
import myAxios from "../plugins/myAxios.ts";
import {Dialog, Toast} from "vant";
import {useRouter} from "vue-router";
import {ref} from "vue";

const VanDialog = Dialog.Component;

interface TeamCardListProps {
  teamList: TeamType[];
}

const props = defineProps<TeamCardListProps>()

const router = useRouter();
const showPasswordDialog = ref(false);
const teamPassword = ref('');
const joinTeamId = ref(0);
const preJoinTeam = (team: TeamType) => {
  joinTeamId.value = team.id;
  // 如果房间加密，则需要输入密码
  if (team.status === 2) {
    showPasswordDialog.value = true;
  } else {
    doJoinTeam()
  }
}

//加入队伍
const doJoinTeam = async () => {
  const res = await myAxios.post('/team/join', {
    teamId: joinTeamId.value,
    teamPassword: teamPassword.value
  });

  if (res.code === 0) {
    Toast.success('加入队伍成功');
    // 刷新当前页面
    window.location.reload()
  } else {
    Toast.fail(res.description ? res.description : res.message);
  }
  showPasswordDialog.value = false;
}

// 退出队伍
const doQuitTeam = async (id: number) => {
  const res = await myAxios.post('/team/quit', {
    teamId: id,
  });

  if (res.code === 0) {
    Toast.success('退出队伍成功');
    // 跳转队伍首页
    router.replace("/team")
  } else {
    Toast.fail(res.description ? res.description : res.message);
  }
}

// 解散队伍
const doDeleteTeam = async (id: number) => {
  const res = await myAxios.post('/team/delete', {
    teamId: id,
  });

  if (res.code === 0) {
    Toast.success('解散队伍成功');
    // 跳转队伍首页
    router.replace("/team")
  } else {
    Toast.fail(res.description ? res.description : res.message);
  }
}
</script>

<template>
  <div id="teamCardList" style="margin-bottom: 55px">
    <van-card v-for="team in props.teamList"
              :desc="team.description"
              :title="team.teamName"
              :thumb="team.avatarUrl"
    >
      <template #tags>
        <van-tag plain type="danger" style="margin-right: 10px;margin-top: 10px">{{ teamStatusEnum[team.status] }}
        </van-tag>
      </template>
      <template #bottom>
        <div>
          {{ '人数: ' + team.joinNum + '/' + team.maxNum }}
        </div>
        <div>
          {{ '创建时间: ' + team.createTime }}
        </div>
        <div v-if="team.expireTime">
          {{ '过期时间: ' + team.expireTime }}
        </div>
      </template>
      <template #tag>
        <div v-if="team.owner">
          <van-tag color="#7232dd">房主</van-tag>
        </div>
      </template>
      <template #footer>
        <van-button v-if="!team.hasJoin && !team.owner && team.status!==1" type="primary" size="small"
                    @click="preJoinTeam(team)">
          加入队伍
        </van-button>
        <van-button v-if="team.status===1" disabled   size="small" type="primary">仅邀请加入</van-button>
        <van-button v-if="team.hasJoin" type="success" size="small" @click="doQuitTeam(team.id)">
          退出队伍
        </van-button>
        <van-button v-if="team.owner" type="danger" size="small" @click="doDeleteTeam(team.id)">
          解散队伍
        </van-button>
      </template>
    </van-card>

    <van-dialog v-model:show="showPasswordDialog" title="密码" show-cancel-button @confirm="doJoinTeam()">
      <van-field
          v-model="teamPassword"
          type="password"
          name="teamPassword"
          placeholder="请输入队伍密码"
          :rules="[{ required: true, message: '请填写请输入队伍密码' }]"
      />
    </van-dialog>

    <van-empty image="search" v-if="!teamList || teamList.length<1" description="暂无搜索结果"/>
  </div>
</template>

<style scoped>
#teamCardList :deep(.van-image__img) {
  height: 129px;
  object-fit: unset;
}
</style>